<script setup lang="ts">
import type { UserPrizeVO } from '@/types/vo/UserPrizeVO'
import { getUserPrizePageService } from '@/apis/front/prize'
import type { UserPrizeQuery } from '@/types/query/UserPrizeQuery'

const params = ref<UserPrizeQuery>({
  pageNum: 1,
  pageSize: 5,
})
const total = ref(0)
const loading = ref(false)
const myPrizeList = ref<UserPrizeVO[]>([])
const getList = async () => {
  try {
    loading.value = true
    const res = await getUserPrizePageService(params.value)
    myPrizeList.value = res.data.data.records
    total.value = res.data.data.total
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getList()
})
</script>

<template>
  <div class="my-prize-page">
    <div class="page-container">
      <!-- 主内容区 -->
      <div class="main-content">
        <div class="content-card">
          <div class="card-header">
            <div class="header-title">我的兑换记录</div>
          </div>

          <n-spin :show="loading">
            <div class="order-list" v-if="myPrizeList.length > 0">
              <MyPrizeItem
                v-for="item in myPrizeList"
                :key="item.id"
                :item="item"
                @delete="getList"
                @refund="getList"
              />
            </div>

            <div class="empty-state" v-else-if="!loading">
              <n-empty description="暂无兑换记录" />
            </div>

            <div class="pagination-container">
              <n-pagination
                v-model:page="params.pageNum"
                :item-count="total"
                :page-size="params.pageSize"
                @update:page="getList"
              />
            </div>
          </n-spin>
        </div>
      </div>

      <!-- 侧边栏 -->
      <div class="sidebar">
        <UserCard class="sidebar-card" />
        <RecommendCard class="sidebar-card" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.my-prize-page {
  width: 100%;
  min-height: 100%;
  padding: 16px 0 30px;
}

.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  gap: 16px;
}

.main-content {
  flex: 1;
}

.content-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.header-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.order-list {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.empty-state {
  padding: 40px 0;
  display: flex;
  justify-content: center;
}

.pagination-container {
  padding: 16px 20px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #f0f0f0;
}

.sidebar {
  width: 280px;
}

.sidebar-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  margin-bottom: 16px;
  padding: 16px;
}

@media (max-width: 992px) {
  .page-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .my-prize-page {
    padding: 12px 0 20px;
  }

  .page-container {
    padding: 0 12px;
  }

  .order-list {
    padding: 12px;
  }
}
</style>
